<template>
  <div>
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="18"> </el-col>

      <el-col :span="6" class="table-tools">
        <el-button
          @click="openSaveDialog(0, '')"
          icon="el-icon-plus"
          v-if="hasPermission(permission.save)"
          >{{ "添加" + dialogTitle }}</el-button
        >
      </el-col>
    </el-row>

    <el-table
      ref="table"
      :highlight-current-row="true"
      :data="tableData"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="lazyRemoteData"
    >
      <!-- 表格属性 start -->
      <el-table-column prop="name" label="名称" width="180"> </el-table-column>
      <el-table-column prop="icon" label="图标" width="120">
        <template slot-scope="{ row }">
          {{ row.icon || "----" }}
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <!-- 表格属性 end -->

      <el-table-column
        fixed="right"
        label="操作"
        width="180"
        v-if="hasAnyPermission()"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="medium"
            icon="el-icon-edit"
            @click="openUpdateDialog(scope.row)"
            v-if="hasPermission(permission.update)"
          ></el-button>
          <el-button
            type="text"
            size="medium"
            icon="el-icon-delete"
            @click="deleteRow(scope.row)"
            v-if="hasPermission(permission.delete)"
          ></el-button>
          <el-button
            type="text"
            size="medium"
            @click="openSaveDialog(scope.row.id, scope.row.name)"
            v-if="hasPermission(permission.saveChildren)"
            >{{ "添加子" + dialogTitle }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <Update ref="updateDialog" :dialogTitle="dialogTitle"></Update>
  </div>
</template>

<script>
import { mapState } from "vuex";
import treeListMixins from "@/views/base/treeListMixins";

// 请求接口 start
import productApi from "@/api/productApi";
import Update from "@/views/product/category/update.vue";
// 请求接口 end

export default {
  // 组件名称 start
  name: "productCategory",
  // 组件名称 end

  components: {
    Update,
  },
  mixins: [treeListMixins],
  data() {
    return {
      // 标题
      dialogTitle: "分类",
      permission: {
        save: "product:category:save",
        saveChildren: "product:category:save",
        update: "product:category:update",
        delete: "product:category:delete",
      },
    };
  },
  methods: {
    // 加载一级分类数据
    remoteData() {
      productApi.category
        .children(0)
        .then((res) => {
          this.tableData = res.data;
        })
        .catch((error) => {});
    },
    // 懒加载数据
    lazyRemoteData(node, treeNode, resolve) {
      productApi.category
        .children(node.id)
        .then((res) => {
          resolve(res.data);
        })
        .catch((error) => {});
    },
    // 删除
    deleteRow(row) {
      this.$confirm(
        "确认删除" + this.dialogTitle + " [" + row.name + "] ?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          productApi.category.delete(row.id).then((res) => {
            this.resetData();
          });
        })
        .catch(() => {});
    },
  },
  computed: mapState({
    user: (state) => state.user.userInfo,
  }),
};
</script>